<template>
  <div class="font-semibold text-white grid grid-cols-3 gap-[20px]">
    <XMImg
      :src="gameDetail?.icon"
      class="w-full aspect-square object-cover bg-[#00000050] rounded-[16px] border-[2px] border-solid border-[#FFFFFF] shadow-xl"
    />
    <div class="flex flex-col gap-[10px] col-span-2 bg-[#00000010] p-[10px] rounded-[16px]">
      <div class="text-[20px]">{{ gameDetail?.name }}</div>
      <div class="text-[12px] flex flex-wrap gap-[8px]">
        <div
          class="rounded-full bg-[#ffffff50] p-[2px_6px]"
          v-for="(item, index) in gameDetail?.type || []"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <t-tooltip :content="gameDetail?.des">
        <div class="text-[12px] text-[#ffffff80] break-all line-clamp-3">{{ gameDetail?.des }}</div>
      </t-tooltip>
    </div>
  </div>
</template>

<script lang="ts" setup>
const { gameDetail } = defineProps<{
  gameDetail: GameJson;
}>();
</script>

<style scoped></style>
